<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲜时蔬 - 忘记密码</title>
    <script src="../../js/vue.js"></script>
    <link rel="stylesheet" href="../../css/index.css">
    <script src="../../js/index.js"></script>
    <script src="../../js/axios.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            color: #333;
            min-height: 100vh;
            padding-top: 80px;
            padding-bottom: 50px;
        }

        .header {
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .container {
            width: 1140px;
            margin: 0 auto;
            padding: 0 15px;
        }

        @media (max-width: 1199px) { .container { width: 960px; } }
        @media (max-width: 991px) { .container { width: 720px; } }
        @media (max-width: 767px) { .container { width: 100%; } }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            color: #27ae60;
            text-decoration: none;
        }

        .logo i { margin-right: 8px; }

        .nav { display: flex; }

        .nav a {
            margin: 0 15px;
            text-decoration: none;
            color: #666;
            font-size: 14px;
            padding: 5px 0;
        }

        .nav a.active {
            color: #27ae60;
            border-bottom: 2px solid #27ae60;
        }

        .user-actions { display: flex; align-items: center; }

        .user-actions button {
            margin-left: 15px;
            background: none;
            border: none;
            color: #666;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
        }

        .user-actions button i { margin-right: 5px; }

        .main {
            padding: 40px 0;
        }

        .reset-password-container {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
            padding: 30px;
            max-width: 800px;
            margin: 0 auto;
        }

        .reset-password-title {
            text-align: center;
            margin-bottom: 30px;
        }

        .reset-password-title h2 {
            font-size: 24px;
            color: #333;
            display: inline-block;
            padding-bottom: 10px;
            border-bottom: 2px solid #27ae60;
        }

        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        @media (max-width: 767px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }
        }

        .el-form-item {
            margin-bottom: 20px;
            flex: 1;
        }

        .el-input, .el-select {
            width: 100%;
            border-radius: 4px !important;
            border: 1px solid #e5e7eb !important;
            transition: all 0.3s ease;
        }

        .el-input:hover, .el-select:hover {
            border-color: #27ae60 !important;
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.1) !important;
        }

        .el-input:focus-within, .el-select:focus-within {
            border-color: #27ae60 !important;
            box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.2) !important;
        }

        .captcha-container {
            display: flex;
            gap: 10px;
        }

        .captcha-input {
            flex: 1;
        }

        .captcha-btn {
            width: 120px;
            background-color: #27ae60 !important;
            color: white !important;
            border: none !important;
        }

        .captcha-btn:disabled {
            background-color: #cccccc !important;
            cursor: not-allowed;
        }

        .submit-btn {
            width: 100%;
            height: 44px;
            background-color: #27ae60 !important;
            border: none !important;
            font-size: 16px;
            transition: all 0.3s ease;
        }

        .submit-btn:hover {
            background-color: #219d5d !important;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(39, 174, 96, 0.2);
        }

        .form-desc {
            color: #999;
            font-size: 12px;
            margin-top: 5px;
        }

        .login-tip {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
        }

        .login-tip a {
            color: #27ae60;
            text-decoration: none;
            margin-left: 5px;
        }

        .login-tip a:hover {
            text-decoration: underline;
        }

        .footer {
            background: #333;
            color: #fff;
            padding: 30px 0;
            margin-top: 50px;
        }

        .footer-content {
            text-align: center;
            font-size: 14px;
        }
    </style>
</head>
<body>
<div id="app">
    <header class="header">
        <div class="container">
            <div class="header-content">
                <a href="index.html" class="logo">
                    <i class="el-icon-shopping-bag"></i>
                    <span>鲜时蔬</span>
                </a>
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="vegetables.html">蔬菜列表</a>
                    <a href="contact.html">联系我们</a>
                </nav>
                <div class="user-actions">
                    <button @click="goToUserLogin">
                        <i class="el-icon-user"></i> 用户登录
                    </button>
                </div>
            </div>
        </div>
    </header>

    <main class="main">
        <div class="container">
            <div class="reset-password-container">
                <div class="reset-password-title">
                    <h2>忘记密码</h2>
                </div>

                <el-form :model="resetForm" ref="resetForm" :rules="resetRules" label-width="120px">
                    <!-- 用户名 -->
                    <el-form-item label="用户名" prop="userName">
                        <el-input
                                v-model="resetForm.userName"
                                placeholder="请输入用户名"
                                @keyup.enter.native="handleResetPassword">
                        </el-input>
                        <div class="form-desc">用于身份验证</div>
                    </el-form-item>
                    <!-- 手机号 -->
                    <el-form-item label="手机号" prop="phonenumber">
                        <el-input
                                v-model="resetForm.phonenumber"
                                placeholder="请输入手机号"
                                @keyup.enter.native="handleResetPassword">
                        </el-input>
                        <div class="form-desc">用于接受验证码</div>
                    </el-form-item>

                    <!-- 验证码 -->
                    <el-form-item label="验证码" prop="captcha" required>
                        <div class="captcha-container">
                            <el-input
                                    v-model="resetForm.captcha"
                                    placeholder="请输入验证码"
                                    class="captcha-input"
                                    maxlength="4"
                                    @keyup.enter.native="handleResetPassword">
                            </el-input>
                            <el-button
                                    :disabled="countdown > 0"
                                    @click="getCaptcha"
                                    class="captcha-btn">
                                {{ countdown > 0 ? `${countdown}秒后重新获取` : '获取验证码' }}
                            </el-button>
                        </div>
                    </el-form-item>

                    <!-- 新密码 -->
                    <div class="form-row">
                        <el-form-item label="新密码" prop="password">
                            <el-input
                                    v-model="resetForm.password"
                                    type="password"
                                    placeholder="请设置新密码（6-20位，含字母和数字）"
                                    @keyup.enter.native="handleResetPassword">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confirmPassword">
                            <el-input
                                    v-model="resetForm.confirmPassword"
                                    type="password"
                                    placeholder="请再次输入新密码"
                                    @keyup.enter.native="handleResetPassword">
                            </el-input>
                        </el-form-item>
                    </div>

                    <!-- 提交按钮 -->
                    <el-form-item>
                        <el-button
                                type="primary"
                                class="submit-btn"
                                @click="handleResetPassword"
                                :loading="loading">
                            重置密码
                        </el-button>
                    </el-form-item>

                    <!-- 已有账号提示 -->
                    <div class="login-tip">
                        记得密码了？<a href="#" @click.prevent="goToUserLogin">立即登录</a>
                    </div>
                </el-form>
            </div>
        </div>
    </main>

    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <p>© 2025 鲜时蔬 版权所有 | 京ICP备12345678号</p>
            </div>
        </div>
    </footer>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            const validatePassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入新密码'));
                }
                if (value.length < 6 || value.length > 20) {
                    return callback(new Error('密码长度必须在6-20个字符之间'));
                }
                if (!/^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/.test(value)) {
                    return callback(new Error('密码必须包含字母和数字'));
                }
                callback();
            };

            const validateConfirmPassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请确认密码'));
                }
                if (value !== this.resetForm.password) {
                    return callback(new Error('两次输入的密码不一致'));
                }
                callback();
            };

            const validateUserName = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入用户名'));
                }
                if (value.length < 6 || value.length > 20) {
                    return callback(new Error('用户名长度必须在6-20个字符之间'));
                }
                if (!/^[a-zA-Z0-9]+$/.test(value)) {
                    return callback(new Error('用户名只能包含字母和数字'));
                }
                callback();
            };
            // 手机号验证规则
            const validatePhone = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入联系电话'));
                }
                if (!/^1[3-9]\d{9}$/.test(value)) {
                    return callback(new Error('请输入有效的手机号码'));
                }
                callback();
            };
            // 手机号验证规则
            const validateCaptcha = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入验证码'));
                }
                if (!/^\d{4}$/.test(value)) {
                    return callback(new Error('验证码必须是4位数字'));
                }
                callback();
            };

            return {
                resetForm: {
                    userName: '',
                    captcha: '',
                    password: '',
                    confirmPassword: '',
                    phonenumber: ''
                },
                loading: false,
                countdown: 0,
                resetRules: {
                    userName: [
                        { required: true, validator: validateUserName, trigger: 'blur' }
                    ],
                    captcha: [
                        { required: true, validator: validateCaptcha, trigger: 'blur' }
                    ],
                    password: [
                        { required: true, validator: validatePassword, trigger: 'blur' }
                    ],
                    confirmPassword: [
                        { required: true, validator: validateConfirmPassword, trigger: 'blur' }
                    ],
                    phonenumber: [
                        { required: true, validator: validatePhone, trigger: 'blur' }
                    ],
                }
            };
        },
        methods: {
            goToUserLogin() {
                window.location.href = '/vegetablemarketexpress/html/front/login.html';
            },
            goToCart() {
                window.location.href = 'cart.html';
            },
            getCaptcha() {
                const _this = this;
                // 1. 先校验用户名和手机号是否已填写（复用表单验证规则）
                const isUserNameValid = this.resetRules.userName[0].validator({}, this.resetForm.userName, (err) => err);
                const isPhoneValid = this.resetRules.phonenumber[0].validator({}, this.resetForm.phonenumber, (err) => err);
                if (!this.resetForm.userName) {
                    this.$message.warning("请先输入用户名");
                    return;
                }
                if (!this.resetForm.phonenumber) {
                    this.$message.warning("请先输入手机号");
                    return;
                }
                axios.get('/vegetablemarketexpress/user/forgetPasswordCaptcha',{
                    params: {
                        userName: this.resetForm.userName,
                        phonenumber: this.resetForm.phonenumber
                    }
                })
                    .then(response => {
                        if (response.data.code === 200) {
                            _this.$message.success('验证码获取成功');
                            _this.countdown = 60;
                            const timer = setInterval(() => {
                                _this.countdown--;
                                if (_this.countdown <= 0) {
                                    clearInterval(timer);
                                }
                            }, 1000);
                        } else {
                            _this.$message.error(response.data.message || '验证码获取失败');
                        }
                    })
                    .catch(error => {
                        console.error('验证码获取错误:', error);
                        _this.$message.error('验证码获取异常，请检查网络');
                    });
            },
            handleResetPassword() {
                this.$refs.resetForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;

                        // 2. 构造请求参数（移除confirmPassword，避免冗余传参）
                        /*const forgetParams = { ...this.resetForm };
                        delete forgetParams.confirmPassword;*/
                        const userData = {
                            userName: this.resetForm.userName,
                            password: this.resetForm.password,
                            //captcha: this.resetForm.captcha,
                            phonenumber: this.resetForm.phonenumber
                            // 确保包含后端 User 类需要的其他必要字段
                        };
                        axios.post( '/vegetablemarketexpress/user/forgetPassword?captcha=' + encodeURIComponent(this.resetForm.captcha), userData)
                            .then(response => {
                                this.loading = false;
                                if (response.data.code === 200) {
                                    this.$message.success('密码重置成功，即将跳转登录页');
                                    setTimeout(() => {
                                        this.goToUserLogin();
                                    }, 1500);
                                } else {
                                    this.$message.error(response.data.message || '密码重置失败');
                                }
                            })
                            .catch(error => {
                                this.loading = false;
                                console.error('密码重置请求失败:', error);
                                this.$message.error('网络异常，密码重置失败');
                            });
                    }
                });
            }
        }
    });
</script>
</body>
</html>